<template>
    <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @select="handleSelect"
      >
        <el-menu-item index="1" >
            <el-icon size="100"><Dish /></el-icon>
            <span>点餐</span>      
        </el-menu-item>
        <el-menu-item index="2">
            <el-icon size="100"><Document /></el-icon>
            <span>订单</span>
        </el-menu-item>
        <el-menu-item index="3">
            <el-icon size="100"><Histogram /></el-icon>
            <span>数据</span>
        </el-menu-item>
      </el-menu>
  </template>
  
<script setup>
import { useRouter } from 'vue-router'
const router=useRouter()
const handleSelect = (key, keyPath) => {
    if(key==='1'){
        router.push('/home/food')
    }else if(key==='2'){
        router.push('/home/order')
    }else{
        //router.push('/home/data')
    }
}   
</script>
<style scoped>
.el-menu-item{
    height: 250px;
    font-size: 24px;
}
.el-menu-item.is-active{
    background-color: rgb(253,95,32);
    color: #fff;
}
</style>